<!DOCTYPE html>
<html>
<head>
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>

<script type="module">
    import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/build/three.module.js';
    // 创建场景
    var scene = new THREE.Scene();

    // 创建相机
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 5, 10);

    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 车身
    var bodyGeometry = new THREE.BoxGeometry(4, 2, 2);
    var bodyMaterial = new THREE.MeshBasicMaterial({ color: 0x0088ff });
    var body = new THREE.Mesh(bodyGeometry, bodyMaterial);
    scene.add(body);

    // 车轮
    var wheelGeometry = new THREE.SphereGeometry(0.5, 32, 32);
    var wheelMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });

    var frontWheel = new THREE.Mesh(wheelGeometry, wheelMaterial);
    frontWheel.position.set(-1.5, -1, 1);
    scene.add(frontWheel);

    var backWheel = new THREE.Mesh(wheelGeometry, wheelMaterial);
    backWheel.position.set(1.5, -1, 1);
    scene.add(backWheel);

    // 创建动画
    var clock = new THREE.Clock();

    function animate() {
        var delta = clock.getDelta();

        body.rotation.y += 0.01;
        frontWheel.rotation.z += 0.05;
        backWheel.rotation.z += 0.05;

        renderer.render(scene, camera);
        requestAnimationFrame(animate);
    }

    animate();

    // 添加光源
    var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);

    var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
    directionalLight.position.set(0, 1, 0);
    scene.add(directionalLight);

    // 设置窗口大小响应
    window.addEventListener('resize', function () {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }, false);

</script>
</body>
</html>
